<template lang="">
    <div class="container">
        <el-page-header @back="goBack" content="查看详情">
        </el-page-header>
        <!-- 上面部分 -->
        <div class="top-controls" v-if="questionnaireType == 1">
            <div class="main-box base-shadow pad top-controls-situation">
                <ShowingSituation></ShowingSituation>
            </div>
            <div class="main-box base-shadow pad" :class=" selectTeacher ? 'top-controls-list' : 'teacher-no-action' ">
                <TeachersList :conId="$route.query.conId"></TeachersList>
            </div>
            <transition name="course">
                <div class="main-box base-shadow pad top-controls-list" v-show="selectTeacher">
                    <CourseList :conId="$route.query.conId"></CourseList>
                </div>
            </transition>
        </div>
        <!-- 下面部分 -->
        <div class="main-box base-shadow pad">
            <div class="title text-center">{{title}}</div>
            <div class="download" v-if="!selectTeacher">
                <el-link type="primary" icon="el-icon-download" download :href="`https://www.amamiyuki.top:443/web/studentQuestion/export/${$route.query.conId}`" target="_blank">导出为Excel</el-link>
            </div>
            <div class="charts">
                <div class="charts-item" v-for="item in resultArr" :key="item.queId">
                    <div class=" title">{{item.queQue}}（{{type(item.queType)}}）：</div>
                    <component :is="handleComponents(item.queType)" :item="item"></component>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import ChartGroup from '@/components/analyses/ChartGroup.vue';
    import FillCharts from '@/components/analyses/FillCharts.vue';
    import TeachersList from '@/components/analyses/TeachersList.vue';
    import ShowingSituation from '@/components/analyses/ShowingSituation.vue';
    import CourseList from '@/components/analyses/CourseList.vue';
    export default {
        name: 'Analyses',
        data() {
            return {
                title: '',
                questionResult: [],
                resultArr: [],
                selectTeacher: false,
                questionnaireType: -1
            }
        },
        components: {
            ChartGroup,
            TeachersList,
            ShowingSituation,
            CourseList
        },
        methods: {
            type(queType) {
                if (queType == 0) {
                    return '单选题'
                } else if (queType == 1) {
                    return '多选题'
                } else if(queType == 2 || queType == 3) {
                    return '填空题'
                }else if (queType == 4){
                    return '下拉框'
                }
            },
            goBack() {
                this.$router.go(-1)
            },
            handleComponents(queType) {
                if (queType == 0 || queType == 1 || queType == 4) {
                    return ChartGroup
                } else {
                    return FillCharts
                }
            },
            getDate(conId) {
                axios({
                    method: 'GET',
                    url: '/QueResultChart/queryQueData',
                    withCredentials: true,
                    params: { quedataConid: conId },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.handleList(result.data)
                }).catch((err) => {
                    this.$message({
                        message: '拉取结果失败' + err.message,
                        type: 'info'
                    });
                });
            },
            handleList(question) {

                let optionArr = []
                let quesList = question
                for (let i in question) {
                    console.log(question[i]);
                }

                for (let i = 0; i < quesList.length; i++) {         //将多余结果提取出来
                    for (let j = i + 1; j < quesList.length; j++) {
                        if (quesList[i].qssQuedata.quedataQuedid == quesList[j].qssQuedata.quedataQuedid) {
                            optionArr.push({                    //将“多余”的选项结果提取出来
                                ...quesList[i].qssQuedata       //   ↑多余的意思是指一个题的选项结果中，除第一个即将作为模板的元素以外的所有元素
                            })
                            quesList.splice(j - 1, 1)
                            j--     //由于上一行删除了重复的元素，数组长度发生变化，因此需要j--
                        } else {
                            break
                        }
                    }
                }
                console.log(quesList);
                for (let i in quesList) {
                    console.log('quesList[i]', quesList[i]);
                }
                console.log('多余结果', optionArr);
                let resultArr = []
                for (let i = 0; i < quesList.length; i++) {         //组装结果数组的基础部分(模板)
                    resultArr.push({
                        queQue: quesList[i].queQue,
                        queType: quesList[i].queType,
                        queId: quesList[i].qssQuedata.quedataQuedid,
                        option: [{
                            name: quesList[i].qssQuedata.quedataOption,
                            value: quesList[i].qssQuedata.quedataCount
                        }]
                    })
                }
                console.log('resultArr', resultArr);
                let index = 0
                for (let i = 0; i < resultArr.length; i++) {                //将拆分出来的结果与基础部分结合
                    console.log('optionArr[index]', optionArr[index]);
                    if (optionArr[index]) {
                        if (resultArr[i].queId == optionArr[index].quedataQuedid) { //如果找到了相同相同题目ID的元素，则开始push组装
                            resultArr[i].option.push({                              //
                                name: optionArr[index].quedataOption,               //
                                value: optionArr[index].quedataCount                //
                            })                                                      //
                            index++                                                 //组装成功后index+1，指向下一个“多余选项”数组
                            i--                                                     //由于可能存在多个选项结果，因此resultArr[i]的指向不能发生改变，组装成功后i--表示继续组装该元素
                        }
                    } else {
                        break
                    }
                }
                console.log('resultArr最终结果', resultArr);
                this.resultArr = resultArr
            }
        },
        mounted() {
            // this.getDate(this.$route.query.conId)
            this.title = this.$route.query.conTitle
            this.questionnaireType = this.$route.query.questionnaireType
            if (this.questionnaireType == 1) {
                this.$bus.$on('teacherSelected', (res) => {
                    console.log('分析数据-教师', res);
                    this.handleList(res)
                })
                this.$bus.$on('selectAll', () => {  //当选择全部时，重新请求数据并隐藏课程栏
                    // this.getDate(this.$route.query.conId)
                    this.resultArr = []
                    this.selectTeacher = false      //该变量仅与样式相关
                })
                this.$bus.$on('teacherShowing', () => {
                    this.selectTeacher = true
                })
            }
            /* this.handleList(
                [
                    {
                        "quedataConid": 1,
                        "queQue": "这是测试题",
                        "queType": 1,
                        "qssQuedata": {
                            "quedataQuedid": 1,
                            "quedataOption": "A,V,B",
                            "quedataCount": 58
                        }
                    },
                    {
                        "quedataConid": 1,
                        "queQue": "这是测试题",
                        "queType": 1,
                        "qssQuedata": {
                            "quedataQuedid": 1,
                            "quedataOption": "A,B",
                            "quedataCount": 8
                        }
                    },
                    {
                        "quedataConid": 1,
                        "queQue": "这是测试题",
                        "queType": 1,
                        "qssQuedata": {
                            "quedataQuedid": 1,
                            "quedataOption": "A,V",
                            "quedataCount": 5
                        }
                    },
                    {
                        "quedataConid": 1,
                        "queQue": "22",
                        "queType": 0,
                        "qssQuedata": {
                            "quedataQuedid": 2,
                            "quedataOption": "456",
                            "quedataCount": 67
                        }
                    },
                    {
                        "quedataConid": 1,
                        "queQue": "填空示",
                        "queType": 2,
                        "qssQuedata": {
                            "quedataQuedid": 440621456,
                            "quedataOption": "你好",
                            "quedataCount": 73
                        }
                    }
                ]
            )
            setTimeout(() => {
                this.handleList(
                    [
                        {
                            "quedataConid": 1,
                            "queQue": "这是测试题",
                            "queType": 1,
                            "qssQuedata": {
                                "quedataQuedid": 1,
                                "quedataOption": "A,V",
                                "quedataCount": 5
                            }
                        },
                        {
                            "quedataConid": 1,
                            "queQue": "这是测试题",
                            "queType": 1,
                            "qssQuedata": {
                                "quedataQuedid": 1,
                                "quedataOption": "A,V,D",
                                "quedataCount": 10
                            }
                        },
                        {
                            "quedataConid": 1,
                            "queQue": "22",
                            "queType": 4,
                            "qssQuedata": {
                                "quedataQuedid": 2,
                                "quedataOption": "6",
                                "quedataCount": 6
                            }
                        },
                        {
                            "quedataConid": 1,
                            "queQue": "22",
                            "queType": 4,
                            "qssQuedata": {
                                "quedataQuedid": 2,
                                "quedataOption": "10",
                                "quedataCount": 10
                            }
                        },
                        {
                            "quedataConid": 1,
                            "queQue": "填空示",
                            "queType": 4,
                            "qssQuedata": {
                                "quedataQuedid": 440621456,
                                "quedataOption": "好",
                                "quedataCount": 7
                            }
                        }
                    ]
                )
            }, 5000); */
        },
        beforeDestroy() {
            this.$bus.$off('teacherSelected')
            this.$bus.$off('selectAll')
            this.$bus.$off('courseSelected')
        },
    }
</script>
<style scoped>
    .charts-item {
        border-bottom: 1px solid #DCDFE6;
    }

    .title {
        margin: 20px;
    }

    .main-box {
        margin-top: 20px;
    }

    .top-controls {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .top-controls-list {
        width: calc(40% - 60px);
        margin-left: 20px;
        transition: all 0.3s;
    }

    .top-controls-situation {
        width: 20%;
        flex: 1;
    }

    .teacher-no-action {
        width: calc(75% - 30px);
        margin-left: 20px;
    }

    .course-enter {
        width: 0px;
    }

    .course-enter-active {
        transition: width 0.3s;
    }

    .course-enter-to {
        width: calc(40% - 60px);
    }

    .course-leave {
        width: calc(40% - 60px);
    }

    .course-leave-active {
        transition: width 0.3s;
    }

    .course-leave-to {
        width: 0px;
    }

    .download{
        text-align: center;
    }
</style>